<!DOCTYPE html>
<html>
    <head>
        <title>tree组件</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <link type="text/css" rel="stylesheet" href="../style/avalon.doc.css">
        <script src="../avalon.js"></script>
        <script src="../highlight/shCore.js"></script>
        <script>
        var child = []
        var zNodes =[
            { id:1, pid:0, name:"父节点1 - 展开", open:true},
            { id:11, pid:1, name:"父节点11 - 折叠"},
            { id:111, pid:11, name:"叶子节点111"},
            { id:112, pid:11, name:"叶子节点112"},
            { id:113, pid:11, name:"叶子节点113"},
            { id:114, pid:11, name:"叶子节点114"},
            { id:12, pid:1, name:"父节点12 - 折叠"},
            { id:121, pid:12, name:"叶子节点121"},
            { id:122, pid:12, name:"叶子节点122"},
            { id:123, pid:12, name:"叶子节点123"},
            { id:124, pid:12, name:"叶子节点124"},
            { id:13, pid:1, name:"父节点13 - 没有子节点", isParent:true},
            { id:2, pid:0, name:"父节点2 - 折叠"},
            { id:21, pid:2, name:"父节点21 - 展开", open:true},
            { id:211, pid:21, name:"叶子节点211"},
            { id:212, pid:21, name:"叶子节点212"},
            { id:213, pid:21, name:"叶子节点213"},
            { id:214, pid:21, name:"叶子节点214"},
            { id:22, pid:2, name:"父节点22 - 折叠"},
            { id:221, pid:22, name:"叶子节点221"},
            { id:222, pid:22, name:"叶子节点222"},
            { id:223, pid:22, name:"叶子节点223"},
            { id:224, pid:22, name:"叶子节点224"},
            { id:23, pid:2, name:"父节点23 - 折叠"},
            { id:231, pid:23, name:"叶子节点231"},
            { id:232, pid:23, name:"叶子节点232"},
            { id:233, pid:23, name:"叶子节点233"},
            { id:234, pid:23, name:"叶子节点234"},
            { id:3, pid:0, name:"父节点3 - 没有子节点", isParent:true}
        ];

            require(["tree/avalon.tree.edit"], function() {
                avalon.define("test", function(vm) {
                    vm.tree = {
                        children: zNodes,
                        edit: {
                            showRemoveBtn: function(leaf) {
                                return leaf.level > 0
                            }
                        },
                        data: {
                            simpleData: {
                                enable: true,
                                pIdKey: "pid"
                            },
                            keep: {
                                leaf: false,
                                parent: true
                            }
                        },
                        view: {
                            editNameSelectAll: true,
                            showLine: function(leaf) {
                                return true
                                return leaf.level > 1 || 1
                            }
                        },
                        callback: {
                            onExpand: function(leaf) {
                                console.log(leaf)
                            },
                            beforeRemove: function(obj) {
                                return confirm("确认删除?")
                            },
                            onRemove: function(leaf) {
                                console.log("remove " + leaf)
                            },
                            onRename: function(arg) {
                                console.log("renamed")
                            },
                            beforeAdd: function(obj) {
                                return confirm("确认添加?")
                            },
                            onNodeCreated: function(obj) {
                                avalon.log("node onNodeCreated")
                            },
                            onDblClick: function() {
                                console.log(2)
                            }
                        }
                    }
                    vm.$treeOpt = {
                        children: [child[0]]
                    }
                    vm.$skipArray = ["tree"]
                })
                avalon.scan()
            })
        </script>
    </head>
    <body ms-controller="test">
        <h1>tree - 简单数据模式</h1>
        <div ms-widget="tree,tree2"></div>
        <pre ms-skip class="brush:html;gutter:false;toolbar:false">&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;tree组件&lt;/title&gt;
        &lt;meta charset=&quot;UTF-8&quot;&gt;
        &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width&quot;&gt;
        &lt;script src=&quot;../avalon.js&quot;&gt;&lt;/script&gt;
        
        &lt;script&gt;
        var child = []
        var zNodes =[
            { id:1, pid:0, name:&quot;父节点1 - 展开&quot;, open:true},
            { id:11, pid:1, name:&quot;父节点11 - 折叠&quot;},
            { id:111, pid:11, name:&quot;叶子节点111&quot;},
            { id:112, pid:11, name:&quot;叶子节点112&quot;},
            { id:113, pid:11, name:&quot;叶子节点113&quot;},
            { id:114, pid:11, name:&quot;叶子节点114&quot;},
            { id:12, pid:1, name:&quot;父节点12 - 折叠&quot;},
            { id:121, pid:12, name:&quot;叶子节点121&quot;},
            { id:122, pid:12, name:&quot;叶子节点122&quot;},
            { id:123, pid:12, name:&quot;叶子节点123&quot;},
            { id:124, pid:12, name:&quot;叶子节点124&quot;},
            { id:13, pid:1, name:&quot;父节点13 - 没有子节点&quot;, isParent:true},
            { id:2, pid:0, name:&quot;父节点2 - 折叠&quot;},
            { id:21, pid:2, name:&quot;父节点21 - 展开&quot;, open:true},
            { id:211, pid:21, name:&quot;叶子节点211&quot;},
            { id:212, pid:21, name:&quot;叶子节点212&quot;},
            { id:213, pid:21, name:&quot;叶子节点213&quot;},
            { id:214, pid:21, name:&quot;叶子节点214&quot;},
            { id:22, pid:2, name:&quot;父节点22 - 折叠&quot;},
            { id:221, pid:22, name:&quot;叶子节点221&quot;},
            { id:222, pid:22, name:&quot;叶子节点222&quot;},
            { id:223, pid:22, name:&quot;叶子节点223&quot;},
            { id:224, pid:22, name:&quot;叶子节点224&quot;},
            { id:23, pid:2, name:&quot;父节点23 - 折叠&quot;},
            { id:231, pid:23, name:&quot;叶子节点231&quot;},
            { id:232, pid:23, name:&quot;叶子节点232&quot;},
            { id:233, pid:23, name:&quot;叶子节点233&quot;},
            { id:234, pid:23, name:&quot;叶子节点234&quot;},
            { id:3, pid:0, name:&quot;父节点3 - 没有子节点&quot;, isParent:true}
        ];

            require([&quot;tree/avalon.tree.edit&quot;], function() {
                avalon.define(&quot;test&quot;, function(vm) {
                    vm.tree = {
                        children: zNodes,
                        edit: {
                            showRemoveBtn: function(leaf) {
                                return leaf.level &gt; 0
                            }
                        },
                        data: {
                            simpleData: {
                                enable: true,
                                pIdKey: &quot;pid&quot;
                            },
                            keep: {
                                leaf: false,
                                parent: true
                            }
                        },
                        view: {
                            editNameSelectAll: true,
                            showLine: function(leaf) {
                                return true
                                return leaf.level &gt; 1 || 1
                            }
                        },
                        callback: {
                            onExpand: function(leaf) {
                                console.log(leaf)
                            },
                            beforeRemove: function(obj) {
                                return confirm(&quot;确认删除?&quot;)
                            },
                            onRemove: function(leaf) {
                                console.log(&quot;remove &quot; + leaf)
                            },
                            onRename: function(arg) {
                                console.log(&quot;renamed&quot;)
                            },
                            beforeAdd: function(obj) {
                                return confirm(&quot;确认添加?&quot;)
                            },
                            onNodeCreated: function(obj) {
                                avalon.log(&quot;node onNodeCreated&quot;)
                            }
                        }
                    }
                    vm.$treeOpt = {
                        children: [child[0]]
                    }
                    vm.$skipArray = [&quot;tree&quot;]
                })
                avalon.scan()
            })
        &lt;/script&gt;
    &lt;/head&gt;
    &lt;body ms-controller=&quot;test&quot;&gt;
        &lt;h1&gt;tree - 简单数据模式&lt;/h1&gt;
        &lt;div ms-widget=&quot;tree,tree2&quot;&gt;&lt;/div&gt;
        
    &lt;/body&gt;
&lt;/html&gt;
</pre>
    </body>
</html>
